<template>
  <div class="index" style="width: 100%;height: 100%;">
    <div>
      <div v-loading="loading">
        <div id="myChart" style="width: 100%;height: 100%" ></div>
      </div>
      <div v-loading="loading">
        <div id="myChart2" style="width: 100%;height: 100%" ></div>
      </div>
      <div v-loading="loading">
        <div id="myChart3" style="width: 100%;height: 100%" ></div>
      </div>
    </div>
    <div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
</template>
<style>
   .index>div{
      /* border: 1px solid red; */
      width: 100%;
      height: 50%;
      display: flex;
   }
   .index>div>div{
      /* border: 1px solid red; */
      width: 100%;
      height: 100%;
   }
</style>
<script>

import request from "../utils/request";
import * as echarts from "echarts";

export default {
  name: 'Index',
  components: {

  },
  data(){
    return{
      loading: true,
      num:[],
      data:[],
    }
  },
  mounted(){
    this.selectVideoCount();
    this.selectVideoCount2();
  },
  methods:{
    selectVideoCount(){
      var that = this;
      that.loading = true;
      request.get("/videoWeb/selectVideoCount",{
        params:{
        },
      }).then(res =>{
        this.num = res.count;
        this.$nextTick(()=>{
          this.drawLine();
        });//后执行echarts
        setTimeout(function (){
          that.loading = false;
        }, 300);
      })
    },
    drawLine(){
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('myChart'))
      // 绘制图表
      myChart.setOption({
        title: { text: '视频数量统计-柱状图' },
        tooltip: {},
        xAxis: {
          data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"]
        },
        yAxis: {},
        series: [{
          color: '#03AAE1',
          name: '视频数量统计',
          type: 'bar',
          data: this.num,
        }],
      });

      // 基于准备好的dom，初始化echarts实例
      var myChart3 = echarts.init(document.getElementById('myChart3'))
      // 绘制图表
      myChart3.setOption( {
        title: { text: '视频数量统计-折线图' },
        xAxis: {
          type: 'category',
          data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"]
        },
        yAxis: {
          type: 'value'
        },
        series: [{
            data: this.num,
            type: 'line',
            smooth: true
        }]
      })
    },
    selectVideoCount2(){
      var that = this;
      that.loading = true;
      request.get("/videoWeb/selectVideoCount2",{
        params: {
          userId: this.id,
        }
      }).then(res => {
        this.data = res;
        this.$nextTick(() => {
          this.drawLine2();
        });//后执行echarts
        setTimeout(function (){
          that.loading = false;
        }, 300);
      })
    },
    drawLine2(){
      // 基于准备好的dom，初始化echarts实例
      let myChart2 = echarts.init(document.getElementById('myChart2'))
      // 绘制图表
      myChart2.setOption({
        title: {
          text: '视频数量统计-饼状图'
        },
        series: [{
          type: 'pie',    // 设置图表类型为饼图
          radius: '55%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
          data:this.data, // 数据数组，name 为数据项名称，value 为数据项值
          itemStyle: {
            normal:{
              label:{
                show: true,
                formatter: '{b}-{c}个-{d}%'
              },
              labelLine :{show:true},
            }
          }
        }],
      });
    }
  }
}
</script>
